let data = [
    {
        id: 1,
        url: "./imgaes/1.webp",
        nam: "掘金酱",
        time: "20天前",
        desc: "新年伊始，2月更文带你在技术写作之路「兔飞猛进」｜ 掘金日新计划",
        desc1: "掘友们新年快乐~2023年第一次更文挑战正式上线啦！相信大家已经调整好状态，蓄势待发了，2月与掘金一起在技术写作之路「兔飞猛进」吧！"
    },
    {
        id: 2,
        url: "./imgaes/1.webp",
        nam: "掘金酱",
        time: "20天前",
        desc: "新年伊始，2月更文带你在技术写作之路「兔飞猛进」｜ 掘金日新计划",
        desc1: "掘友们新年快乐~2023年第一次更文挑战正式上线啦！相信大家已经调整好状态，蓄势待发了，2月与掘金一起在技术写作之路「兔飞猛进」吧！"
    },
    {
        id: 2,
        url: "./imgaes/1.webp",
        nam: "掘金酱",
        time: "20天前",
        desc: "新年伊始，2月更文带你在技术写作之路「兔飞猛进」｜ 掘金日新计划",
        desc1: "掘友们新年快乐~2023年第一次更文挑战正式上线啦！相信大家已经调整好状态，蓄势待发了，2月与掘金一起在技术写作之路「兔飞猛进」吧！"
    },
    {
        id: 2,
        url: "./imgaes/1.webp",
        nam: "掘金酱",
        time: "20天前",
        desc: "新年伊始，2月更文带你在技术写作之路「兔飞猛进」｜ 掘金日新计划",
        desc1: "掘友们新年快乐~2023年第一次更文挑战正式上线啦！相信大家已经调整好状态，蓄势待发了，2月与掘金一起在技术写作之路「兔飞猛进」吧！"
    },
    {
        id: 2,
        url: "./imgaes/1.webp",
        nam: "掘金酱",
        time: "20天前",
        desc: "新年伊始，2月更文带你在技术写作之路「兔飞猛进」｜ 掘金日新计划",
        desc1: "掘友们新年快乐~2023年第一次更文挑战正式上线啦！相信大家已经调整好状态，蓄势待发了，2月与掘金一起在技术写作之路「兔飞猛进」吧！"
    },
    {
        id: 2,
        url: "./imgaes/1.webp",
        nam: "掘金酱",
        time: "20天前",
        desc: "新年伊始，2月更文带你在技术写作之路「兔飞猛进」｜ 掘金日新计划",
        desc1: "掘友们新年快乐~2023年第一次更文挑战正式上线啦！相信大家已经调整好状态，蓄势待发了，2月与掘金一起在技术写作之路「兔飞猛进」吧！"
    }
]
function setData(data) {
    let str = "";
    for (let i = 0; i < data.length; i++) {
        str += `        
        <div class="nav">
            <div class="nav-one">
                <a href="###" class="nav-link">${data[i].nam}</a>
                <span>${data[i].time}</span>
            </div>
            <div class="nav-two">
                <div class="nav-two1">
                    <a href="###" class="nav-link">${data[i].desc}</a>
                    <a href="###" class="nav-link">${data[i].desc1}</a>
                </div>
                <img src="${data[i].url}" alt="">
            </div>
        </div>
        `
    }

    // console.log(str);
    $(".naav").html(str);
}
// 调用函数
setData(data);
$(".it").click(function () {
    console.log(this);  // 获取的是  DOM对象
    console.log($(this)); // 获取的是 jquery对象
    // 排他思想：其余的兄弟元素去掉字体颜色  siblings()兄弟姐妹
    $(this).siblings().css("color","");
    // 当前的元素字体变红色
    $(this).css("color","red");
})
$("li").click(function () {
    console.log(this);  // 获取的是  DOM对象
    console.log($(this)); // 获取的是 jquery对象
    // 排他思想：其余的兄弟元素去掉字体颜色  siblings()兄弟姐妹
    $(this).siblings().css("color","");
    // 当前的元素字体变红色
    $(this).css("color","#007fff");
})